<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=calendar-horizontal
-->
<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title>虚拟币日费率</title>
	</head>
	<body style="height: 100%; margin: 0">
		
		<div id="container" style="height: 100%; width: 92%;"></div>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};

			var option;

			function getData2021() {
				let year = '2021';
				var data = [
					[echarts.number.parseDate(year + '-09-04'), 3],
					[echarts.number.parseDate(year + '-09-05'), 3],
					[echarts.number.parseDate(year + '-09-06'), 3]
				];
				return data;
			}

			// function getData2022() {
			// 	let year = '2022';
			// 	var data = [
			// 		[echarts.number.parseDate(year + '-09-04'), 1000],
			// 		[echarts.number.parseDate(year + '-09-05'), 1000],
			// 		[echarts.number.parseDate(year + '-09-06'), 1000]
			// 	];
			// 	return data;
			// }

			option = {
				tooltip: {
					position: 'top'
				},
				visualMap: {
					min: 0,
					max: 3,
					calculable: true,
					orient: 'horizontal',
					left: 'center',
					top: 'top',
					inRange: {
						color: ['rgb(0,177,133)', 'rgb(102,208,182)', 'rgb(237,137,136)', 'rgb(228,86,84)'],
						// rgb(239,154,152)
					},
				},

				calendar: [{
						range: '2021',
						cellSize: ['auto', 20],
						dayLabel: {
							firstDay: 1,
						}
					},
					// {
					// 	top: 260,
					// 	range: '2022',
					// 	cellSize: ['auto', 20]
					// }
				],

				series: [{
						type: 'heatmap',
						coordinateSystem: 'calendar',
						calendarIndex: 0,
						data: getData2021()
					},
					// {
					// 	type: 'heatmap',
					// 	coordinateSystem: 'calendar',
					// 	calendarIndex: 1,
					// 	data: getData2022()
					// }
				]

			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
		</script>
	</body>
</html>
